<!--
 * @Author: your name
 * @Date: 2021-10-08 10:21:05
 * @LastEditTime: 2021-10-08 20:00:44
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \dashboard\src\pages\government\components\Bottom2.vue
-->
<template>
  <div id="bottom2" style="height: 95%"></div>
</template>
<script>
import { Pie } from "@antv/g2plot";
export default {
  data() {
    return {};
  },
  methods: {
    myChart() {
      const data = [
        { type: "本科生", value: 38 },
        { type: "硕士生", value: 15 },
        { type: "博士生", value: 7 },
        { type: "专科生", value: 26 },
        { type: "其他", value: 8 },
      ];

      const piePlot = new Pie("bottom2", {
        appendPadding: 10,
        data,
        angleField: "value",
        colorField: "type",
        radius: 0.9,
        label: {
          type: "inner",
          offset: "-30%",
          content: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
          style: {
            fontSize: 14,
            textAlign: "center",
          },
        },
        interactions: [{ type: "element-active" }],
      });

      piePlot.render();
    },
  },
  created() {},
  mounted() {
    this.myChart();
  },
};
</script>